<template>
  <el-container class="home-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-scrollbar>
          <div id="elAside" :class="[isCollapse ? '' : 'anim']">
            <div class="asideTop">
              <img
                :class="[isCollapse ? 'imgSmall' : 'imgBig']"
                src="~@/assets/images/logo.png"
                alt=""
              />
              <span
                :class="[isCollapse ? 'disappear' : '']"
                style="text-align: center"
                >Lunangangster邮件后台系统</span
              >
            </div>
            <!-- 侧边栏菜单区域 -->
            <el-menu
              background-color="#eff7fd"
              class="el-menu-vertical"
              text-color="#000"
              active-text-color="#409EFF"
              :unique-opened="true"
              :collapse="isCollapse"
              :collapse-transition="false"
              :router="true"
              :default-active="activePath"
            >
              <template v-for="item in menuListForAdmin">
                <el-submenu
                  :index="item.path"
                  :key="item.id"
                  v-if="item.children"
                >
                  <template slot="title">
                    <!-- 图标 -->
                    <i :class="iconsObj[item.id]"></i>
                    <!-- 文本 -->
                    <span>{{ item.authName }}</span>
                  </template>
                  <el-menu-item
                    :index="'/' + sonItem.path"
                    v-for="sonItem in item.children"
                    :key="sonItem.id"
                    @click="saveActivePath('/' + sonItem.path)"
                  >
                    <template slot="title">
                      <!-- 二级菜单的模板区域 -->
                      <i class="el-icon-menu"></i>
                      <!-- 图标 -->
                      <span>{{ sonItem.authName }}</span>
                      <!-- 文本 -->
                    </template>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item
                  :index="'/' + item.path"
                  :key="item.id"
                  v-else
                  @click="saveActivePath('/' + item.path)"
                >
                  <!-- 图标 -->
                  <i :class="iconsObj[item.id]"></i>
                  <!-- 文本 -->
                  <span slot="title">{{ item.authName }}</span>
                </el-menu-item>
              </template>

              <!-- 一级菜单 -->
            </el-menu>
          </div>
        </el-scrollbar>
      </el-aside>
      <!-- 右侧内容区域 -->
      <el-container>
        <!-- 头部区域 -->
        <el-header>
          <el-tooltip
            class="item"
            effect="dark"
            :content="isCollapse ? '展开左侧菜单' : '折叠左侧菜单'"
            placement="right"
          >
            <div
              class="toggle-button"
              @click="toggleCollapse"
              v-if="isCollapse"
            >
              <i class="el-icon-s-unfold"></i>
            </div>
            <div class="toggle-button" @click="toggleCollapse" v-else>
              <i class="el-icon-s-fold"></i>
            </div>
          </el-tooltip>
          <div>
            <el-button type="primary" @click="logout">注销登录</el-button>
          </div>
        </el-header>
        <!-- 内容主体区域 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
/**
 * @author 卢永昌
 */
export default {
  name: "Home",
  data() {
    return {
      // 左侧菜单数据
      menuListForAdmin: [
        {
          id: 0xe67b,
          authName: "平台数据",
          path: "dataAnalysis",
          order: 0
        },
        {
          authName: "服务器管理",
          id: 0xe662,
          order: 1,
          path: "serverManagement"
        },
        {
          authName: "用户管理",
          id: 0xe812,
          order: 3,
          path: "userManagement"
        },
        {
          authName: "日志管理",
          id: 0xe613,
          order: 4,
          path: "loggerManagement"
        },
        {
          authName: "UP主管理",
          id: 0xe605,
          order: 5,
          path: "uperApproval"
        }
      ],

      iconsObj: {
        // 一级菜单的icon图标
        0xe662: "iconfont icon-gongzuotai",
        0xe67b: "iconfont icon-shujufenxi",
        0xe653: "iconfont icon-hetongguanli",
        0xe93c: "iconfont icon-guidanghetong",
        0xe605: "iconfont icon-hetongshenpi",
        0xe812: "iconfont icon-renyuanbumenguanli",
        0xe613: "iconfont icon-hetongmobanguanli",
        0xe643: "iconfont icon-liuchengguanli",
        0xe636: "iconfont icon-keshangguanli"
      },
      isCollapse: false, // 是否折叠属性
      activePath: "",
      //用户类型
      userType: 0
    };
  },
  created() {
    //从缓存中取出当前激活的菜单选项

    this.activePath = window.sessionStorage.getItem("activePath")
      ? window.sessionStorage.getItem("activePath")
      : "/dataAnalysis";
  },
  methods: {
    /**
     * @description 退出登录函数
     */
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },

    /**
     * @description 处理下拉菜单中选中某个item的函数
     * @param command 选中的下拉菜单条目编号
     */
    handleDrop(command) {
      if (command === "1") {
        //跳转到个人中心
        this.$router.push("/userZone");
        window.sessionStorage.setItem("activePath", "/userZone");
        this.activePath = "/userZone";
      } else if (command === "2") {
        //退出登录
        this.logout();
      }
    },

    /**
     * @description 点击按钮,切换菜单的折叠和展开
     */
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },

    /**
     * @description 修改缓存中的当前激活菜单索引
     * @param activePath 当前激活的菜单的索引
     */
    saveActivePath(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    }
  }
};
</script>

<style lang="less" scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.hWelcome {
  color: #fff;
  font-size: 15px;
  height: 25px;
  text-align: center;
  background: green;

  span {
    margin-left: 10px;
  }
}

.home-container {
  height: 100%;
}

.el-header {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  background-color: #459fff;
  align-items: center;
  color: #fff;
  font-size: 20px;

  > div {
    display: flex;
    align-items: center;

    span {
      margin-left: 15px;
      font-size: 24px;
      font-weight: bold;
    }

    .el-dropdown {
      display: block;
    }
  }
}

.el-menu-item:hover {
  outline: 0 !important;
  color: #fff !important;
  background: #409eff !important;
}

.el-menu-submenu:hover {
  outline: 0 !important;
  color: #fff !important;
  background: #409eff !important;
}

.el-menu-item.is-active {
  color: #409eff !important;
  background: #e6f7ff !important;
  border-right: 4px solid #1684fc;
}

.el-aside {
  background-color: #eff7fd;

  .asideTop {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 0;
    margin: 0 10px;
    letter-spacing: 4px;
    border-bottom: 1px solid #ccc;

    span {
      margin-top: 10px;
    }
  }

  .el-menu {
    border-right: none;
  }
}

.imgBig {
  padding: 2px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.imgSmall {
  padding: 2px;
  border-radius: 50%;
  animation: imgSmall 0.5s;
  width: 50px;
  height: 50px;
}

@keyframes imgSmall {
  0% {
    width: 100px;
    height: 100px;
  }
  100% {
    width: 50px;
    height: 50px;
  }
}

.el-aside {
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
}

.el-main {
  background-color: #eaedf1;
}

.iconfont {
  padding-right: 10px;
}

.icon-tongZhi {
  margin: 5px;
}

.avatar {
  padding-right: 10px;
  cursor: pointer;
}

.avatar :hover {
  opacity: 0.8;
}

.toggle-button {
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  margin-left: 20px;
  align-items: center;
  display: flex;
}

#user_avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disappear {
  display: none;
}

.anim {
  animation: anim 0.6s ease-in;
}

@keyframes anim {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.el-scrollbar {
  width: 100%;
  height: 100%;
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-scrollbar__bar.is-horizontal {
  display: none !important;
}
</style>
